<template>
  <div>
    <head-top goBack="true"></head-top>
    <div class="newPlaceholder"></div>
    <div class="setting">
      <div class="headImg flexBetween">
        <span>头像</span>
        <div class="flexCenter">
          <img :src="userInfo.Avatar" alt>
        </div>
      </div>
      <div class="accountInfo">
        <div @click="changeNickname" class="flexBetween">
          <span>姓名</span>
					
          <span v-if="userinfos.NickName">{{userinfos.NickName}}</span>
					<span v-else>请输入姓名</span>
        </div>
        <div class="flexBetween">
          <span>手机</span>
          <span>{{userInfo.Userphone}}</span>
        </div>
        <!-- <div class="flexBetween">
          <span>账号绑定</span>
          <span class="iconfont icon-xuanzeqixiayige"></span>
        </div>-->
      </div>
      <div class="realInfo">
        <div @click="changeDate" class="flexBetween">
          <span>出生日期</span>
          <span v-if="birthDate">{{birthDate|formatDate}}</span>
					<span v-else>请输入出生日期</span>
        </div>
        <div class="flexBetween">
          <span>会员等级</span>
          <span>{{statistics.GradeName}}</span>
        </div>
      </div>
      <div @click="goPage('/addressIndex')" class="addressManage flexBetween">
        <span>收货地址管理</span>
        <span style="color: #888" class="iconfont icon-xuanzeqixiayige"></span>
      </div>
      <div @click="goPage('/changePassword')" class="changePassword flexBetween">
        <span>修改密码</span>
        <span style="color: #888" class="iconfont icon-xuanzeqixiayige"></span>
      </div>
      <div class="layout" @click="layout">退出登录</div>
    </div>

    <div v-if="msgbox" class="modal flexCenter" style="z-index: 20;">
      <div class="msgbox">
        <div class="mint-msgbox-content">
          <div class="mint-msgbox-message">请输入姓名</div>
          <div class="mint-msgbox-input">
            <input style="height: 1.54rem" v-model="NickName"  placeholder="请输入姓名" type="text">
          </div>
        </div>
        <div class="mint-msgbox-btns">
          <button class="mint-msgbox-btn mint-msgbox-cancel" @click="changeNickname">取消</button>
          <button class="mint-msgbox-btn mint-msgbox-confirm" @click="confirm">确定</button>
        </div>
      </div>
    </div>
    <mt-datetime-picker
      :startDate="startDate"
      @confirm="getDate"
      ref="picker"
      type="date"
      v-model="pickerValue"
    ></mt-datetime-picker>
  </div>
</template>

<script>
import headTop from "src/components/header/newHead";
import { getStore, removeStore } from "../../../config/mUtils";
import { DatetimePicker, MessageBox, Toast } from "mint-ui";

export default {
  name: "setting",
  data() {
    return {
      userInfo: {},
      birthDate: "",
      statistics: {},
      pickerValue: "",
      startDate: new Date("1920"),
      msgbox: false,
      NickName: "",
      userinfos: {}
    };
  },
  components: {
    headTop
  },
   filters: {
    formatDate: function(val) {
      if(val){
        return val.split(' ')[0];
      }
    }
  },
  computed: {},
  methods: {
    changeDate() {
      this.$refs.picker.open();
      this.pickerValue=this.birthDate
    },
    getDate(date) {
      var year = new Date(date).getFullYear();
      var month = new Date(date).getMonth() < 10 ? '0'+(new Date(date).getMonth() + 1) : new Date(date).getMonth()+1;
      var day = new Date(date).getDate()< 10 ? '0'+new Date(date).getDate(): new Date(date).getDate();
      this.birthDate = year + "-" + month + "-" + day;
      this.userinfos.BirthDate = this.birthDate;
      this.$axios
        .post("integral.user.birthdate.modify", this.userinfos)
        .then(p => {
          if (p.data.status == "10001") {
            Toast({
              message: p.data.result,
              iconClass: "iconfont icon-dui",
              duration: 1500
            });
          } else {
            Toast({
              message: p.data.msg,
              iconClass: "iconfont icon-cuo",
              duration: 1500
            });
          }
        });
    },
    changeNickname() {
      this.msgbox = !this.msgbox;
    },
    confirm() {
      this.userinfos.NickName = this.NickName;
      this.$axios
        .post("integral.user.nickname.modify", this.userinfos)
        .then(p => {
          if (p.data.status == "10001") {
            this.msgbox = !this.msgbox;
            Toast({
              message: p.data.result,
              iconClass: "iconfont icon-dui",
              duration: 1500
            });
          } else {
            Toast({
              message: p.data.msg,
              iconClass: "iconfont icon-cuo",
              duration: 1500
            });
          }
        });
    },

    layout() {
      this.$router.replace({
        path: "/login",
        query: {
          eid: this.userInfo.EnterpriseId
        }
      });
      removeStore("userInfo");
    },
    goPage(path) {
      this.$router.push({
        path: path
      });
    },
    //获取统计信息
    getStatistics() {
      this.$axios
        .get("the.integral.statistics", {
          params: {
            InuserId: this.userInfo.Id,
            eid: this.userInfo.EnterpriseId,
            UserType: this.userInfo.UserType
          }
        })
        .then(p => {
          this.statistics = p.data.result;
        });
    },
    //获取用户信息
    getuserinfo() {
      this.$axios
        .get("integral.user.getinfo", {
          params: {
            userid: this.userInfo.Id
          }
        })
        .then(p => {
          if(p.data.result)
          {
            this.userinfos = p.data.result;
            this.NickName = this.userinfos.NickName;
            this.birthDate = this.userinfos.BirthDate;
          }
          console.log(this.userinfos)

        });
    }
  },
  created() {
    this.userInfo = getStore("userInfo");
    this.getStatistics();
    this.getuserinfo();
  },
  mounted() {}
};
</script>


<style lang="scss" scoped>
.modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.msgbox {
  background-color: #fff;
  width: 85%;
  border-radius: 3px;
  font-size: 16px;
}

.setting {
  font-size: 0.608696rem;

  > div {
    margin-bottom: 0.304348rem;
    background-color: white;
  }

  .headImg {
    padding: 0.434783rem 0.652174rem;

    > div {
      width: 3.043478rem;
      height: 3.043478rem;
      border-radius: 50%;
      overflow: hidden;

      > img {
        width: 100%;
      }
    }
  }

  .accountInfo,
  .realInfo {
    > div {
      padding: 0.434783rem 0.652174rem;
      border-bottom: 1px solid #eee;

      > span:last-child,
      > a:last-child {
        color: #888;
      }
    }

    > div:last-child {
      border-bottom: none;
    }
  }

  .addressManage,
  .changePassword {
    padding: 0.434783rem 0.652174rem;

    > a {
      color: #888;
    }
  }

  .layout {
    padding: 0.434783rem 0.652174rem;
    text-align: center;
    color: #e51c23;
  }
}
</style>
